<template>
  <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page.sync="page"
               :permission="permissionList"
               v-model="form"
               ref="crud"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">
        <el-button type="warning"
                   size="small"
                   icon="el-icon-download"
                   plain
                   @click="handleExport">导出
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <!-- <el-button v-if="scope.row.sfyj != 1" type="button" size="small" @click="checkPaper(scope.row)">批阅考卷</el-button> -->
        <!-- <el-button v-if="scope.row.sfyj == 1" type="text" size="small" @click="paperDetail(scope.row)">考卷详情</el-button> -->
        <el-button type="text" size="small" @click="paperDetail(scope.row)">考卷详情</el-button>
      </template>
      <template slot="ksTime" slot-scope="scope">
        <div>{{formatDate(scope.row.ksTime)}}</div>
      </template>
      <template slot="jsTime" slot-scope="scope">
        <div>{{formatDate(scope.row.jsTime)}}</div>
      </template>
      <template slot="kscj" slot-scope="scope">
        <div>{{scope.row.kscj != -1 ? scope.row.kscj : ""}}</div>
      </template>
      <template slot="ksjg" slot-scope="scope">
        <div>{{scope.row.kscj ? (scope.row.kscj == 1 ? "是" : "否") : ""}}</div>
      </template>
    </avue-crud>
    <el-dialog title="考卷详情" append-to-body :visible.sync="dialogVisable" width="90%" top="5vh">
      <el-scrollbar>
        <div style="height:60vh;">
          <!-- <h3>选择题</h3> -->
          <div v-for="(item, index) in questionList" :key="item.id">
            <el-divider></el-divider>
            <!-- 问题显示 -->
            <h3>{{questionFormat(item, index)}}</h3>
            <!-- <h3>{{index + "、" + item.stnr}}</h3> -->
            <!-- 单选显示 -->
            <ul class="ulBox" v-if="item.stlx == 1">
              <li>
                <!-- 正确答案为A 变绿-->
                <span v-if="item.zqda == 'A'" style="color:#00FF00">{{"A." + item.xxA}}</span>
                <!-- 正确答案不为A 选了A 变红-->
                <span v-else-if="item.xx == 'A'" style="color:#FF0000">{{"A." + item.xxA}}</span>
                <span v-else>{{"A." + item.xxA}}</span>
              </li>
              <li>
                <span v-if="item.zqda == 'B'" style="color:#00FF00">{{"B." + item.xxB}}</span>
                <span v-else-if="item.xx == 'B'" style="color:#FF0000">{{"B." + item.xxB}}</span>
                <span v-else>{{"B." + item.xxB}}</span>
              </li>
              <li>
                <span v-if="item.zqda == 'C'" style="color:#00FF00">{{"C." + item.xxC}}</span>
                <span v-else-if="item.xx == 'C'" style="color:#FF0000">{{"C." + item.xxC}}</span>
                <span v-else>{{"C." + item.xxC}}</span>
              </li>
              <li>
                <span v-if="item.zqda == 'D'" style="color:#00FF00">{{"D." + item.xxD}}</span>
                <span v-else-if="item.xx == 'D'" style="color:#FF0000">{{"D." + item.xxD}}</span>
                <span v-else>{{"D." + item.xxD}}</span>
              </li>
            </ul>
            <!-- 多选显示 -->
            <ul class="ulBox" v-if="item.stlx == 2">
              <li>
                <!-- 正确答案为A 变绿-->
                <span v-if="item.zqda.indexOf('A') != -1" style="color:#00FF00">{{"A." + item.xxA}}</span>
                <!-- 正确答案不为A 选了A 变红-->
                <span v-else-if="item.xx.indexOf('A') != -1" style="color:#FF0000">{{"A." + item.xxA}}</span>
                <span v-else>{{"A." + item.xxA}}</span>
              </li>
              <li>
                <span v-if="item.zqda.indexOf('B') != -1" style="color:#00FF00">{{"B." + item.xxB}}</span>
                <span v-else-if="item.xx.indexOf('B') != -1" style="color:#FF0000">{{"B." + item.xxB}}</span>
                <span v-else>{{"B." + item.xxB}}</span>
              </li>
              <li>
                <span v-if="item.zqda.indexOf('C') != -1" style="color:#00FF00">{{"C." + item.xxC}}</span>
                <span v-else-if="item.xx.indexOf('C') != -1" style="color:#FF0000">{{"C." + item.xxC}}</span>
                <span v-else>{{"C." + item.xxC}}</span>
              </li>
              <li>
                <span v-if="item.zqda.indexOf('D') != -1" style="color:#00FF00">{{"D." + item.xxD}}</span>
                <span v-else-if="item.xx.indexOf('D') != -1" style="color:#FF0000">{{"D." + item.xxD}}</span>
                <span v-else>{{"D." + item.xxD}}</span>
              </li>
            </ul>
            <!-- 填空回答显示 -->
            <div v-if="item.stlx == 3">{{item.xx}}</div>
            <!-- 判断回答显示 -->
            <ul class="ulBox" v-if="item.stlx == 4">
              <li style="font-size:20px;margin-left: 25px">
                <i v-if="item.zqda == 1" class="el-icon-check" style="color: #00FF00;"></i>
                <i v-else-if="item.zqda != 1 && item.xx == 1" class="el-icon-check" style="color: #FF0000;"></i>
                <i v-else class="el-icon-check"></i>
              </li>
              <li style="font-size:20px;margin-left: 25px">
                <i v-if="item.zqda == 2" class="el-icon-close" style="color: #00FF00;"></i>
                <i v-else-if="item.zqda != 2 && item.xx == 2" class="el-icon-close" style="color: #FF0000;"></i>
                <i v-else class="el-icon-close"></i>
              </li>
            </ul>
            <div>{{"答案详解：" + item.daxj}}</div>
          </div>
        </div>
      </el-scrollbar>
      <template slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          icon="el-icon-circle-close"
          @click="dialogVisable = false"
          >关闭</el-button
        >
      </template>
    </el-dialog>
    <el-dialog title="考卷批阅" append-to-body :visible.sync="checkDialogVisable" width="90%" top="5vh">
      <div>
        <!-- <h3>选择题</h3> -->
        <div v-for="(item, index) in questionList" :key="item.id">
          <el-divider></el-divider>
          <!-- 问题显示 -->
          <h3>{{questionFormat(item, index)}}</h3>
          <!-- 简答题答案显示 -->
          <div>{{item.note}}</div>
          <div>
            <el-form :model="item">
              <el-row :gutter="24">
                <el-col :span="6">
                  <el-form-item label="得分">
                    <el-input v-model="item.name"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
      <template slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          icon="el-icon-circle-close"
          @click="submitCheckPaper"
          >提交批阅</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-circle-close"
          @click="checkDialogVisable = false"
          >关闭</el-button
        >
      </template>
    </el-dialog>
  </basic-container>
</template>

<script>
  import {getList, getExamInfo} from "@/api/jypx/eduexamrecord/examrecord";
  import {mapGetters} from "vuex";
  import moment from 'moment'
  import { getToken } from "@/util/auth";

  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: true,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height:'auto',
          calcHeight: 30,
          tip: false,
          searchShow: true,
          searchMenuSpan: 6,
          border: true,
          index: true,
          addBtn: false,
          viewBtn: false,
          delBtn: false,
          editBtn: false,
          selection: true,
          dialogClickModal: false,
          column: [
            {
              label: "姓名",
              prop: "ksrName"
            },
            {
              label: "考试人id",
              prop: "ksrId",
              hide: true
            },
            {
              label: "身份证号",
              prop: "ksrCard"
            },
            {
              label: "培训类别",
              prop: "pxlb",
              type: "select",
              dicUrl: "/api/blade-system/dict-biz/dictionary?code=pxlb",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              dataType: "number"
            },
            {
              label: "开始时间",
              prop: "ksTime",
              slot: true
            },
            {
              label: "结束时间",
              prop: "jsTime",
              slot: true
            },
            {
              label: "考试成绩",
              prop: "kscj",
              slot: true
            },
            {
              label: "是否合格",
              prop: "ksjg",
              slot: true
            }
          ]
        },
        data: [],
        // ---------------考试详情相关-------------
        dialogVisable: false,
        questionList: [],
        // ----------------批阅相关----------------
        checkDialogVisable: false
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          // addBtn: false,
          // viewBtn: false,
          // delBtn: false,
          // editBtn: false
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
      submitCheckPaper() {
        // TODO 保存批阅结果
      },
      questionFormat(item, index) {
        index += 1;
        return index + "、" + item.stnr;
      },
      checkPaper(row) {
        // TODO 查询简答题批阅信息
      },
      paperDetail(row) {
        this.questionList = []
        getExamInfo(row.id).then(res => {
          this.questionList = res.data.data;
          this.dialogVisable = true
        })
      },
      handleExport() {
        this.$confirm("是否导出?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          window.open(`/api/eduExamRecord/examrecord/exportExamRecord?${this.website.tokenHeader}=${getToken()}`);
        });
      },
      formatDate(date) {
        if (!date || date.length === 0) {
          return "";
        } else {
          return moment(date).format('YYYY-MM-DD HH:mm:ss');
        }
      },
      searchReset() {
        this.query = {};
        this.onLoad(this.page);
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      currentChange(currentPage){
        this.page.currentPage = currentPage;
      },
      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      onLoad(page, params = {}) {
        this.loading = true;
        getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      }
    }
  };
</script>

<style>
.ulBox{
	list-style: none;
	/*float:left;*/
}
.ulBox li{
  display: inline;
	/* float: left; */
	margin-left: 40px;
}
</style>
